<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>clock</title>
</head>
<body>
    <canvas id="canvas"></canvas>
</body>
<script>
    function clock(){
        var now = new Date();

        var ctx = document.getElementById('canvas').getContext('2d');

        ctx.save(); //保存画布的所有状态

        ctx.clearRect(0,0,150,150);  // 清除制定的，让清除部分完全透明

        ctx.translate(75,75); // 移动

        ctx.scale(0.4,0.4); // 缩放

        ctx.rotate(-Math.PI/2); // 旋转

        ctx.strokeStyle = "black"; //设置图形轮廓的颜色

        ctx.fillStyle = "white"; // 设置图形的填充颜色

        ctx.lineWidth = '8'; // 设置线条的宽度

        ctx.lineCap = 'round'; //设置线条末端样式



        //Hour marks 
        ctx.save();

        for(let i = 0; i < 12; i++){

            ctx.beginPath();

            ctx.rotate(Math.PI/6);

            ctx.moveTo(100,0);

            ctx.lineTo(120,0);

            ctx.stroke();

        };

        ctx.restore();

        //Minute marks

        ctx.save();

        ctx.lineWidth = 5;

        for(let i = 0; i < 60; i++ ){

            if(i%5 != 0){

                ctx.beginPath();

                ctx.moveTo(117,0);

                ctx.lineTo(120,0);

                ctx.stroke();

            }

            ctx.rotate(Math.PI/30);

        }

        ctx.restore();

        var sec = now.getSeconds();

        var min = now.getMinutes();

        var hr = now.getHours();
        
        hr = hr>=12 ? hr -12 : hr;

        ctx.fillStyle = "black";

        //write Hours

        ctx.save();

        ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec );
        
        ctx.beginPath();

        ctx.moveTo(-20,0);

        ctx.lineTo(80,0);

        ctx.stroke();

        ctx.restore();

        //write minutes

        ctx.save();

        ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec );

        ctx.lineWidth = 10;

        ctx.beginPath();

        ctx.moveTo(-28,0);

        ctx.lineTo(112,0);

        ctx.stroke();

        ctx.restore();

        //write seconds

        ctx.save();

        ctx.rotate(sec * Math.PI/30);

        ctx.strokeStyle = "#D40000";

        ctx.fillStyle = "#D40000";

        ctx.lineWidth = 6;

        ctx.beginPath();

        ctx.moveTo(-30,0);

        ctx.lineTo(83,0);

        ctx.stroke();

        ctx.beginPath();

        ctx.arc(0,0,10,0,Math.PI*2,true);

        ctx.fill();

        ctx.beginPath();

        ctx.arc(95,0,10,0,Math.PI*2,true);

        ctx.stroke();

        ctx.fillStyle = "rgba(0,0,0,0)";

        ctx.arc(0,0,3,0,Math.PI*2,true);

        ctx.fill();

        ctx.restore();

        ctx.beginPath();

        ctx.lineWidth = 14;

        ctx.strokeStyle = "#325FA2";

        ctx.arc(0,0,142,0,Math.PI*2,true);

        ctx.stroke();

        ctx.restore();

        window.requestAnimationFrame(clock)


    }

    window.requestAnimationFrame(clock);
</script>
</html>